<template>
  <div id="loading_css_one">
    <el-space wrap>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>齿轮加载</span>
          </div>
        </template>
        <wheel />
      </el-card>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>环形加载</span>
          </div>
        </template>
        <ring />
      </el-card>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>球形加载</span>
          </div>
        </template>
        <ball />
      </el-card>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>螺纹加载进度条</span>
          </div>
        </template>
        <thread />
      </el-card>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>吃豆豆加载</span>
          </div>
        </template>
        <eat-peas />
      </el-card>
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>立方体切换加载</span>
          </div>
        </template>
        <cube />
      </el-card>
    </el-space>
  </div>
</template>
<script lang="ts" setup>
import Wheel from './components/Wheel.vue'
import Ring from './components/Ring.vue'
import Ball from './components/Ball.vue'
import Thread from './components/Thread.vue'
import EatPeas from './components/EatPeas.vue'
import Cube from './components/Cube.vue'
</script>
<style lang="scss" scoped>
#loading_css_one {
  margin: $mainMargin;
}

.box-card {
  width: 340px;
  height: 340px;
}
:v-deep(.el-card__body) {
  width: 300px;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
